<template>
  <div class="l-tabs">
    <u-tabs
      :list="list"
      :is-scroll="false"
      :current="current"
      @change="change"
      :active-color="color"
      :inactive-color="tabs.inactiveColor"
      :font-size="tabs.fontSize"
      :bar-style="{background:color}"
      :gutter="200"
    ></u-tabs>
  </div>
</template>

<script>
import themes from '@/utils/theme.js'
export default {
  name: "l-tabs",
  props: {
    tabList: {
      type: Array,
      default: function () {
        return []
      },
    },
    status:Number
  },
  data() {
    return {
      list: [],
      current: 0,
      type:-1,
      color:themes.themeColor,
      tabs: {
        inactiveColor: '#9f9f9f',
        fontSize: '30',
      },
    }
  },
  computed: {},
  methods: {
    // 切换tabs
    change(index) {
      this.current = index
      this.type = this.list[index].type
      this.$emit('tabback',this.type)
    },
  },
  watch: {
    status(v){
      this.type = v
    }
  },

  // 组件周期函数--监听组件挂载完毕
  mounted() {
    this.list = this.tabList
    this.list.map((item,index)=>{
      if(item.type == this.status){
        this.current = index
      }
    })
  },
}
</script>

<style lang="scss" scoped></style>